<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-18 17:29:17
 * @LastEditTime: 2023-08-10 18:41:31
-->
<script lang="ts" setup name="NewsCenter">
import { ENewsChannel } from '../enum'
import { useNews } from './useNews'
import type { Tlist } from './useNews'
import useFields from './fields'
import { msgApi } from '@/MainApp/apis/msg'

const {
  businessType,
  newsStore,
  msgError,
  msgBoxWarnAsync,
  msgSuccess,
  getBusiness
} = useNews()

getBusiness()

const { t, dialog } = useConfig()
const { fieldList } = useFields()

// 查询模板列表
const templateData = ref([])
const loading = ref(false)
const total = ref(0)
const pageData = ref()

const bussisList = computed(() => businessType.value)
const bussissKey = ref(bussisList.value?.[0]?.businessKey || '')

const getTemplate = async () => {
  loading.value = true
  const params = {
    businessKey: bussissKey.value,
    ...pageData.value
  }
  const { msg, success, data, total: pageTotal } = await msgApi.getPageTemplate(params)
  templateData.value = (success && data) ? data : []
  total.value = pageTotal
  !success && msgError(msg)
  loading.value = false
}

const handSelect = (item: Tlist) => {
  bussissKey.value = item.businessKey
  newsStore.setActiveTemplate(item)
  getTemplate()
}

// 新增、修改
const showConfigModal = ref(false)
const isEditing = ref(false)
const router = useRouter()
// 新增
const handAddTemp = () => {
  isEditing.value = false
  router.push({ name: 'AddMsgTemplate' })
}

/**
 * @description: 配置
 * @return {*}
 */
const channelData = ref([])
const channelLoading = ref(false)
const channelText = ref('')
const channelRow = ref(null)
// 配置
const handConfigTemp = async (row: any) => {
  channelText.value = row.messageTemplateTitle
  showConfigModal.value = true
  channelLoading.value = true
  channelRow.value = { ...row }
  const { success, data, msg } = await msgApi.getMsgChannelDetail(row.id)
  !success && msgError(msg)
  channelLoading.value = false
  channelData.value = data?.channelDefinitions || []
}
// 删除
const handDeleteTemp = (row: any) => {
  msgBoxWarnAsync('删除确认', `确认删除模板 [${row.messageTemplateTitle}] 吗?`, async () => {
    const { msg, success } = await msgApi.deleteMsgTemplate(row.id)
    if (success) {
      msgSuccess(msg)
      getBusiness()
    }
    else { msgError(msg) }
  })
}

const dialogLoading = ref(false)
// 停用、启用
const handChangeStatus = async (row: any, enable: boolean) => {
  dialogLoading.value = true
  const { msg, success } = await msgApi.changeMsgTemplateStatus(row.id, enable)
  dialogLoading.value = false
  if (success) {
    msgSuccess(msg)
    handConfigTemp(channelRow.value)
  }
  else { msgError(msg) }
}

// 编辑
const handEditChnnel = (row: any) => {
  // ConfigChannelConfig
  newsStore.setMsgContentForm({ ...row, $row: channelRow.value })
  router.push({ name: 'ConfigChannelConfig', query: { type: row.channel } })
}

const handConfigChnnel = (row: any) => {
  // ConfigChannelConfig
  newsStore.setMsgContentForm({ ...row, $row: channelRow.value })
  router.push({ name: 'ConfigChannelConfig', query: { type: row.channel } })
}
</script>

<template>
  <IkPageMain fixed>
    <IkSplitPan :size="0">
      <template #left>
        <IkPanel
          :add-btn="false"
          title="模块列表"
          role="ADD-DEPT"
          @hand-refresh="getBusiness"
        >
          <IkItemList
            padding="0"
            :list="bussisList"
            :proxy="{ label: 'businessName', value: 'businessKey' }"
            @select="handSelect"
          />
        </IkPanel>
      </template>
      <template #right>
        <IkPageFull
          v-model="pageData"
          header-title="模板列表"
          :immediate="false"
          :fields="fieldList"
          :table-data="templateData"
          :total="total"
          :loading="loading"
          :search="getTemplate"
        >
          <!-- 搜索slot -->
          <template #headerRight>
            <el-button v-role="'$ADD-NEWS-TEMP'" type="primary" @click="handAddTemp" />
          </template>
          <template #channelNames="{ data }">
            <span v-if="data.row.channelNames">{{ data.row.channelNames }}</span>
            <span v-else style="color:#FF4D4F">
              <IkSvgIcon
                name="icon-tijianhegezhengguoqi"
                style="margin-right: 5px;"
              />
              未启用任意一个消息推送渠道</span>
          </template>
          <template #operate="{ data }">
            <IkBtnContent>
              <IkSvgIcon
                v-role="'CONFIG_NEWS'"
                name="iksvg_shezhi2"
                type="info"
                pop
                show-bg
                :font-size="16"
                :start-margin="false"
                :title="t('action.modify')"
                @click="handConfigTemp(data.row)"
              />
              <IkSvgIcon
                v-role="'DELETE_NEWS'"
                name="icon-shanchu"
                show-bg
                pop
                :title="t('action.delete')"
                @click="handDeleteTemp(data.row)"
              />
            </IkBtnContent>
          </template>
        </IkPageFull>
      </template>
    </IkSplitPan>
    <el-dialog
      v-model="showConfigModal"
      title="配置"
      draggable
      :width="dialog.l"
      @close="showConfigModal = false"
    >
      <p class="mb-[8px]">
        标题：{{ channelText }}
      </p>
      <el-table
        v-loading="channelLoading || dialogLoading"
        :data="channelData"
        border
        style="width: 100%"
      >
        <el-table-column prop="channelName" label="推送渠道" min-width="180" />
        <el-table-column
          prop="statusName"
          label="状态"
          align="center"
          width="80"
        >
          <template #default="{ row }">
            <template v-if="row.configured">
              <IkStatuOver :overfolw="false" :list="[{ title: row.statusName, type: row.status === ENewsChannel.禁用 ? 'warning' : 'success' }]" />
            </template>
            <template v-else>
              <IkStatuOver :overfolw="false" :list="[{ title: '未配置', type: 'primary' }]" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="106">
          <template #default="{ row }">
            <el-button
              v-if="!row.configured"
              type="primary"
              link
              @click="handConfigChnnel(row)"
            >
              配置
            </el-button>
            <el-button
              v-else
              type="primary"
              link
              @click="handEditChnnel(row)"
            >
              编辑
            </el-button>
            <template v-if="row.configured">
              <el-button
                v-if="row.status === ENewsChannel.禁用"
                type="primary"
                class="!ml-0"
                link
                @click="handChangeStatus(row, true)"
              >
                启用
              </el-button>
              <el-button
                v-else
                type="danger"
                class="!ml-0"
                link
                @click="handChangeStatus(row, false)"
              >
                停用
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </IkPageMain>
</template>

<style lang="scss" scoped>
:deep(.el-drawer__body) {
  padding: 0;
}
</style>
